<style lang="scss" scoped>
 .bigscreem{
   width: 100%;
   min-width: 100vw;
   min-height: 100vh;
   background-image: url("/screem/bg004.png");
   background-size: cover;
   overflow: hidden;
   .goindex{
     position: fixed;
     left: 0.52vw;
     top:0.52vw;
     z-index: 1000;
     cursor: pointer;
     color:#fff;
     font-size: 1.25vw;
     opacity: 0.5;
   }
   .screem_context{
     width: 100vw;
     margin: 0 auto;
     padding-bottom: 2.34vw;
     .header{
       display: flex;
       justify-content: center;
       position: relative;
       .title{
         width: 31.25vw;
         height: 3.125vw;
         margin-top: 0.833vw;
         background: #072530;
         border-top: 0.156vw solid #00D1E3;
         border-bottom:  0.156vw  solid #00D1E3;
         opacity: 1;
         text-align: center;
         font-size: 1.4vw;
         font-family: PingFang SC;
         font-weight: 400;
         line-height: 3.125vw;
         color: #04D1E3;
         position: relative;
         left: -3.125vw;
         &:before{
            content:'';
            display: block;
            position: absolute;
            left: -1.12vw;
            top: 0.36vw;
            width: 2.24vw;
            height: 2.24vw;
            transform: rotate(45deg);
            border-bottom: 0.156vw solid #00D1E3;
            border-left: 0.156vw solid #00D1E3;
            background-color: #072530;
          }
         &:after{
           content:'';
           display: block;
           position: absolute;
           right: -1.12vw;
           top: 0.36vw;
           width: 2.24vw;
           height: 2.24vw;
           transform: rotate(45deg);
           border-right:  0.156vw solid #00D1E3;
           border-top:  0.156vw solid #00D1E3;
           background-color: #072530;
         }
       }
       .timer{
         position: absolute;
         right: 3.23vw;
         top: 1.145vw;
         font-size: 1.04vw;
         font-family: PingFang SC;
         font-weight: 400;
         color: #C4DEF2;
         opacity: 1;

       }
     }
     .pad{
       margin:0.52vw 3.125vw 0;
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
     }
   }
 }
</style>
<template>
  <div class="bigscreem">
    <!--<img src="icons02/@2x/status.jpg" width="30px" style="margin-right: 30px" class="goindex">-->
    <i class="el-icon-house goindex"  @click="goIndex"></i>

    <!--<World></World>-->
    <div class="screem_context">
      <div class="header">
        <div class="title">
          生活垃圾智慧管理平台
        </div>
        <div class="timer">{{time}}</div>
      </div>
      <div class="pad">
        <padleft></padleft>
        <padcenter></padcenter>
        <padright></padright>
      </div>
    </div>
  </div>

</template>

<script>
import { mapGetters } from "vuex";
import moment from 'moment'
import  padleft from './padleft/padleft.vue'
import  padright from './padright/padright.vue'
import  padcenter from './padcenter/padcenter.vue'
export default {
  name: "screem",
  data() {
    return {
      time: ''
    };
  },
  created() {
    //document.querySelector('#app').style.overflow = 'auto'
    this.setTime()
  },
  mounted() {},
  props: [],
  components: {padleft,padright,padcenter},
  methods: {
    setTime() {
      setInterval(() => {
        this.time = moment().format('YYYY-MM-DD hh:mm:ss')
      }, 1000)
    },
    goIndex() {
      this.$router.push({ path: "/" });
    }
  }
};
</script>

<style lang="scss" >
  .bot_s{
    position: relative;
    &:before{
      content:'';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0.36vw;
      height: 0.36vw;
      border-bottom: 0.052vw solid #fff;
      border-left: 0.052vw solid #fff;
    }
    &:after{
      content:'';
      display: block;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 0.36vw;
      height: 0.36vw;
      border-bottom: 0.052vw solid #fff;
      border-right: 0.052vw solid #fff;
    }
  }
  .four_t{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    &:before{
      content:'';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 0.36vw;
      height: 0.36vw;
      border-top: 0.052vw solid rgba(192, 208, 231, 0.3);
      border-left: 0.052vw solid rgba(192, 208, 231, 0.3);
    }
    &:after{
      content:'';
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      width: 0.36vw;
      height: 0.36vw;
      border-top: 0.052vw solid rgba(192, 208, 231, 0.3);
      border-right: 0.052vw solid rgba(192, 208, 231, 0.3);
    }
  }
  .four_b{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    &:before{
      content:'';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0.36vw;
      height: 0.36vw;
      border-bottom: 0.052vw solid rgba(192, 208, 231, 0.3);
      border-left: 0.052vw solid rgba(192, 208, 231, 0.3);
    }
    &:after{
      content:'';
      display: block;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 0.36vw;
      height: 0.36vw;
      border-bottom: 0.052vw solid rgba(192, 208, 231, 0.3);
      border-right: 0.052vw solid rgba(192, 208, 231, 0.3);
    }
  }
</style>


